import React, { Component } from 'react';
import { Space, Tag } from "antd";
import { QuestionCircleFilled } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheImage from '@/components/TheImage';
import TheButton from '@/components/TheButton';
import "../../style/style.less";

class OrderTable extends Component {
  constructor(props) {
    super(props)
    this.state = {
      columns: [
        {
          title: '商品图片',
          dataIndex: 'goodsImage',
          key: 'goodsImage',
          render(text) {
            return <TheImage src={[text]} width={80} height={80}></TheImage>
          }
        },
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
          render: (text, record) => {
            return (
              <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
                <span style={{ margin: '0 10px' }}>{record.goodsName}</span>
                <span>{record.sku}</span>
                {
                  record.giftId !== '0' &&
                  <div className='gift'>赠</div>
                }
              </div>
            )
          },
        },
        {
          title: '单价(元)',
          dataIndex: 'orderPrice',
          key: 'orderPrice',
          render(text, render) {
            return <>
              <React.$price price={text || 0} />
              {
                render.activityType === 'SECKILL_HOMEPAGE' && <div style={{ color: 'red' }}>秒杀价</div>
              }
              {
                render.activityType === 'TEAM_BUY' && <Tag color="red">拼团价</Tag>
              }
            </>
          }
        },
        {
          title: '数量(件)',
          dataIndex: 'orderProductCount',
          key: 'orderProductCount',
          render(text) {
            return 'x' + text
          }
        },
        {
          title: '优惠分摊(元)',
          dataIndex: 'detailDiscountsPrice',
          key: 'detailDiscountsPrice',
          render(text) {
            return <React.$price price={text || 0} />
          }
        },
        {
          title: '实付金额(元)',
          dataIndex: 'detailPayPrice',
          key: 'detailPayPrice',
          render(text, record) {
            return <React.$price price={text || 0} />
          }
        },
        {
          title: '状态',
          dataIndex: 'orderDetailState',
          key: 'orderDetailState',
          render(text) {
            let orderStatus = ''
            switch (text) {
              case '3':
                orderStatus = "待付款"
                break;
              case '4':
                orderStatus = "待发货"
                break;
              case '5':
                orderStatus = "待收货"
                break;
              case '9':
                orderStatus = "交易成功"
                break;
              case '0':
                orderStatus = "交易关闭"
                break;
              default:
                orderStatus = "-"
            }
            return orderStatus
          }
        },
        {
          title: '售后状态',
          dataIndex: 'salesStatus',
          key: 'salesStatus',
          render(text, record) {
            let label = ''
            switch (text) {
              // case 1:
              //   label = '退款中'
              //   break
              // case 2:
              //   label = '退款中，平台已同意，待寄回商品'
              //   break
              // case 3:
              //   label = '退款中，商品已寄回，待平台确认'
              //   break
              // case 4:
              //   label = '退款失败'
              //   break
              // case 5:
              //   label = '买家退货超时自动关闭'
              //   break
              // case 6:
              //   label = '卖家拒收商品'
              //   break
              // case 7:
              //   label = '买家取消退款'
              //   break
              // case 9:
              //   label = '退款成功'
              //   break
              // case 0:
              //   label = '退款关闭'
              //   break
              case 1: case 2: case 3: case 5: case 7: case 6:
                label = "售后中"
                break
              case 4: case 9: case 0:
                label = "售后详情"
                break
              default:
                label = '-'
                break
            }
            return label != "-" ? <TheButton type="link" onClick={() => { props.toOrderSalesDetail(record.shopSalesReturnId) }} >{label}</TheButton> : label
          }
        },
      ],
      dataSource: props.tableInfo, //数据信息
    }
  }
  async componentDidMount() {
    await this.getData()
  }
  // 数据处理
  getData = async () => {
    let { dataSource } = this.state
    if (dataSource) {
      this.setState({
        dataSource,
      })
    }
  }
  render() {
    const { columns, dataSource } = this.state
    return (
      <div>
        <TheTable
          columns={columns}
          dataSource={dataSource}
          rowKey={'configCarouselId'}
        />
      </div>
    )
  }
}

export default OrderTable